<template>
  <div class="home-record">
    <!-- header -->
    <van-nav-bar title="推广有奖" class="home-record__nav" ref="header" />
    <!-- tabs -->
    <van-tabs v-model="activeChild" swipeable>
      <van-tab title="奖励规则" />
      <van-tab title="好友列表" />
      <van-tab title="奖励明细" />
    </van-tabs>

    <better-scroll class="home-record__wrapper">
      <div class="home-record__reward" v-show="activeChild === 0">
        <dl>
          <dt>01 发送注册链接给好友</dt>
          <dd>通过微信、微博、面对面等方式将注册链接发给好友</dd>
          <dd>
            我的推广邀请码：
            <span class="activeClass">{{ copyText }}</span>
          </dd>
          <dd
            class="copy-btn"
            v-clipboard:copy="copyText"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >点击复制</dd>
        </dl>
        <dl v-for="(reward, index) in rewardData" :key="index">
          <dt>{{ reward.title }}</dt>
          <dd v-for="(list, key) in reward.list" :key="key" v-html="list.value"></dd>
        </dl>
      </div>

      <van-empty description="暂无好友" v-show="activeChild === 1" />

      <div class="home-record__detail" v-show="activeChild === 2">
        <div class="home-record__detail-money">
          <span>
            可提现金额:
            <i>{{ money }}元</i>
          </span>
          <span @click="isShow = !isShow">查看提现记录</span>
        </div>
        <div class="home-record__detail-rule">提现规则: 每周一周三周五提现,提现金额需大于10元,提现到账需2个工作日</div>
        <div class="home-record__detail-btn">
          <van-button block type="danger">立即提现</van-button>
        </div>
      </div>
    </better-scroll>

    <!-- 提现记录 -->
    <van-popup v-model="isShow" position="right" :style="{ width: '100%', height: '100%' }">
      <div class="popup-open">
        <van-nav-bar title="提现记录" left-text="返回" left-arrow is-link @click-left="onBack" />
        <withdrawal />
      </div>
    </van-popup>
  </div>
</template>

<script>
import Withdrawal from "@/components/withdrawal";
export default {
  name: "HomeRecord",
  components: { Withdrawal },
  data() {
    return {
      copyText: this.$storage.get("mobile"),
      activeChild: 0,
      rewardData: [
        {
          title: "02 普通用户（非代理）推荐注册赚佣金",
          list: [
            {
              className: "defaultClass",
              value: "好友注册成功，他的每一笔充值你都会获得奖金。"
            },
            {
              className: "activeClass",
              value:
                "好友充值一周会员后，你可获得<span class='activeClass'>1元</span>的奖金。"
            },
            {
              className: "activeClass",
              value:
                "好友充值一月会员后，你可获得<span class='activeClass'>6元</span>的奖金。"
            },
            {
              className: "activeClass",
              value:
                "好友充值三月会员后，你可获得<span class='activeClass'>12.5元</span>的奖金。"
            },
            {
              className: "activeClass",
              value:
                "好友充值六月会员后，你可获得<span class='activeClass'>25元</span>的奖金。"
            },
            {
              className: "activeClass",
              value:
                "好友充值年费会员后，你可获得<span class='activeClass'>40元</span>的奖金。"
            }
          ]
        },
        {
          title: "03 代理用户可赚取无线下级奖励",
          list: [
            {
              className: "defaultClass",
              value: "推荐10个好友，在《我的》页面点击'申请代理'自动升级"
            }
          ]
        }
      ],
      money: 0,
      isShow: false
    };
  },
  mounted() {
    const _this = this;
    this.$nextTick(() => {
      var statusBar = window.api.require("statusBar");
      //异步返回结果：
      statusBar.getStatusBarHeight(function(ret) {
        _this.$refs.header.$el.style.height = ret.statusHeight + 44 + "px";
        _this.$refs.header.$el.style.paddingTop = ret.statusHeight + "px";
      });
    });
  },
  methods: {
    // 复制
    onCopy() {
      this.$toast("复制成功!");
    },
    onError() {
      this.$toast("复制失败!");
    },
    // 返回
    onBack() {
      this.isShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.home-record {
  width: 100%;
  height: calc(100vh - 50px);
  @include flex($direction: column, $flexWrap: nowrap);
  .home-record__wrapper {
    width: 100%;
    height: calc(100vh - 138px);
    overflow: hidden;
    .home-record__reward {
      padding: 0 16px;
      dl {
        margin-top: 20px;
        dt {
          font-size: 16px;
          font-weight: 600;
          line-height: 30px;
        }
        dd {
          font-size: 14px;
          line-height: 30px;
          &.copy-btn {
            background: #e4393c;
            border-radius: 4px;
            color: #fff;
            text-align: center;
            margin: 15px 0;
          }
        }
      }
    }
    .home-record__detail {
      padding: 16px;
      .home-record__detail-money {
        span {
          font-size: 16px;
          i {
            color: #e4393c;
            font-style: normal;
          }
          &:last-child {
            margin-left: 15px;
            color: #1989fa;
          }
        }
      }
      .home-record__detail-rule {
        margin: 20px 0;
        line-height: 30px;
        font-size: 14px;
      }
    }
  }
}
</style>

<style lang="scss">
.home-record {
  span {
    &.activeClass {
      color: #e4393c;
    }
  }
}
</style>